<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <title>test</title>
  <meta name="description" content="" />
  <meta name="generator" content="Studio 3 http://aptana.com/" />
  <meta name="author" content="amir" />

  <meta name="viewport" content="width=device-width; initial-scale=1.0" />

  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="stylesheet" href="auto.css" type="text/css"/>
  <style type="text/css">
  	#ta{
  		width: 300px;
  		height : 100px;
		font-size: 11px;
		font-family: "Helvetica Neue",Arial,sans-serif; 
		white-space: pre;
  	}
  	
  </style>
  <script src="jquery-1.5.js" type="text/javascript"></script>
  <script src="auto.js" type="text/javascript"></script>
  	<script type="text/javascript">
  		var dic = [
  			"amir",
  			"yael",
  			"mia",
  			"daniel",
  			"david",
  			"yair",
  			"yaron",
  			"orna",
  			"orly"  		
  		];
  		
  		
  		$(document).ready(function(){
  			$("#ta").autocomplete({wordCount:1,on:{
  				query: function(text,cb){
  					var words = [];
  					for( var i=0; i<dic.length; i++ ){
  						if( dic[i].indexOf(text) == 0 ) words.push(dic[i]);
  					}
  					//if( words.length ){
  						cb(words);
  					//}
  					
  					//console.log("got text for query = ",text);
  					/*if( text.length > 2 ){
  						cb(["abc","efg"]);
  					}*/
  				},
  				selected: function(){}
  			}});
			
			
			$("#ta2").autocomplete({wordCount:1,mode:'outter',on:{
				query: function(text,cb){
  					var words = [];
  					for( var i=0; i<dic.length; i++ ){
  						if( dic[i].indexOf(text) == 0 ) words.push(dic[i]);
  					}
  					//if( words.length ){
  						cb(words);
  					//}
  					
  					//console.log("got text for query = ",text);
  					/*if( text.length > 2 ){
  						cb(["abc","efg"]);
  					}*/
  				}
			
			}});
  		});
		
		
  		
  	</script>
</head>

<body>
    <div>
      	<textarea id="ta"></textarea> 
		
		<textarea id="ta2"></textarea>
		
		
    </div>
    
    

    
</body>
</html>